<template>
  <swiper
    id="home"
    class="swiper-container"
    :options="swiperOption"
    ref="mySwiper"
  >
    <swiper-slide>
      <video
        src="https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/working-man.mp4"
        muted
        autoplay
        loop
      ></video>
      <div class="backdrop"></div>
      <div class="slide-caption left">
        <h1>科技改变世界</h1>
        <h3>
          立足科学发展，着力自主创新。加速科技进步，为全市经济社会发展提供有力支撑。凝聚科技创意，成就创新梦想。
        </h3>
        <button class="explore-btn">探索更多</button>
      </div>
    </swiper-slide>
    <swiper-slide>
      <img
        src="https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/swiper1.jpg"
      />
      <div class="backdrop"></div>
      <div class="slide-caption">
        <h1>用创新点缀人生，让科技融入理想。</h1>
        <h3>
          科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想。
        </h3>
        <!-- 探索按钮 -->
        <button class="explore-btn">探索更多</button>
      </div>
    </swiper-slide>

    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import mock from "@/mock/index.js";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-pagination",
  title: "Pagination",
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    let _self = this;
    return {
      swiperOption: {
        autoHeight: true, //高度随内容变化
        loop: true, // 无限循环
        autoplay: {
          delay: 6000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }, //等同于以下设置
        speed: 1000,
        grabCursor: true,
        parallax: true,
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on: {
          init: function() {
            //Swiper初始化了
            // alert("当前的slide序号是" + this.activeIndex); //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
            // this.emit("transitionEnd"); //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
            _self.showswipertext(this.activeIndex);
          },
          //监听滑动切换事件，返回swiper对象
          slideChangeTransitionStart: function() {
            _self.hideswipertext(this.activeIndex);
          },
          slideChangeTransitionEnd: function() {
            //切换结束时，告诉我现在是第几个slide
            _self.showswipertext(this.activeIndex);
          }
        }
      }
    };
  },
  mounted() {
    let mockdata = mock.aboutusdata();
    console.log("mockdata: ", mockdata);
    //
  },
  methods: {
    showswipertext(activeIndex) {
      const captionsEl = document.querySelectorAll(".slide-caption");

      this.$anime({
        // 对每个子元素进行动画
        targets: captionsEl[activeIndex].children,
        // 透明度
        opacity: [0, 1],
        // 持续时间
        duration: 400,
        easing: "linear",
        // 每个子元素相继延迟400毫秒，第一个延迟300毫秒
        delay: this.$anime.stagger(400, { start: 300 }),
        // 从下向上移动，每行从40到10递减，最后移动到0
        translateY: [this.$anime.stagger([40, 10]), 0]
      });
    },
    hideswipertext() {
      document.querySelectorAll(".slide-caption > *").forEach(el => {
        el.style.opacity = 0;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/style.scss";

.swiper-container {
  width: 100%;
  // 按钮 样式

  --swiper-theme-color: #5698c3; /* 设置Swiper风格 */
  --swiper-navigation-color: white; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 20px; /* 设置按钮大小 */
  // height: 300px;

  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background-color: white;
    text-align: center;
    font-weight: bold;
    font-size: 0px;
    img,
    video {
      width: 100vw;
      height: 100vh;

      object-fit: cover;
    }
  }
  .backdrop {
    position: absolute;
    left: 0;
    /* 放置在幻灯片上层 */
    z-index: 60;
    width: 100%;
    height: 100%;
    background: $backdrop-color;
    opacity: 0.5;
  }

  /* 轮播标题容器 */
  .slide-caption {
    position: absolute;
    /* 放置在遮罩上层 */
    z-index: 70;
    max-width: 60vw;
    color: $text-color-lightest;
    text-align: center;
  }
  /* 轮播标题默认不显示，在JS中用动画移入  */
  .slide-caption > * {
    opacity: 1;
  }

  /* 轮播标题中的主标语 */
  .slide-caption h1 {
    font-weight: 600;
    font-size: 54px;
  }

  /* 轮播标题中的副标语 */
  .slide-caption h3 {
    margin: 48px 0;
    font-size: 24px;
  }

  /* 第二页轮播标题布局方式 */
  .slide-caption.left {
    max-width: 80vw;
    text-align: left;
  }

  /* 探索更多按钮 */
  .explore-btn {
    padding: 14px 32px;
    outline: none;
    border: 0;
    border-radius: 4px;
    background-color: $primary-color;
    color: $text-color-lightest;
    font-size: 18px;
    cursor: pointer;
  }
}

//@media (max-width: 1100px) {

@media (max-width: 650px) {
  .swiper-container .slide-caption h1 {
    font-size: 30px;
  }
  .swiper-container .slide-caption h2 {
    font-size: 25px;
  }
}
</style>
